<!--
 * @Author: your name
 * @Date: 2021-04-15 14:42:57
 * @LastEditTime: 2021-07-29 15:42:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\todoOrder\orderList.vue
-->
<template>
  <page-layout title="缴税人员信息">
    <div style="background: #fff;padding:24px">
      <a-form-model layout="inline" ref="searchToDo" name="searchToDo" style="margin-bottom: 20px">
        <a-form-model-item label="关键字">
          <a-input v-model="formState.keyword" style="width:242px" placeholder="请输入姓名/身份证号/手机号" allow-clear>
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="税款所属期">
          <a-month-picker style="width: 160px" :value="formState.taxMonth ? moment(formState.taxMonth, 'YYYY-MM') : ''" @change="onChangeMonth" placeholder="请选择税款所属期" />
        </a-form-model-item>
        <a-form-model-item label="项目名称">
          <a-select show-search :filter-option="false" style="width: 160px" v-model="formState.projectId" placeholder="请输入项目名称" @search="onSearchProject" @change="onChangeProject" allow-clear>
            <a-select-option v-for="item in project" :key="item.projectId">{{ item.projectName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="缴纳实体">
          <a-select v-model="formState.payEntity" style="width: 160px" placeholder="请选择缴纳实体" allow-clear>
            <!-- <a-select-option :value="key" v-for="(value, key) in taskErrorType" :key="key">{{ value }}</a-select-option> -->
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-space :size="8">
            <a-button type="primary" icon="search" @click="onSearch">查询</a-button>
          </a-space>
        </a-form-model-item>
      </a-form-model>
      <a-table rowKey="id" :columns="columns" :data-source="dataSource" bordered :scroll="{ x: 5500 }" :pagination="{
                            current: formState.pageNum,
                            pageSize: formState.pageSize,
                            total: formState.total,
                            showLessItems: true,
                            onChange: onPageChange,
                            onShowSizeChange: onSizeChange,
                        }" style="background: #fff">
      </a-table>
    </div>
  </page-layout>
</template>

<script>
import moment from 'moment';
import datas from '@/utils/data';
import PageLayout from '@/layouts/PageLayout';
import { getProjectSelectList } from '@/services/todo.js';
export default {
  name: 'taxPayerInfo',
  components: {
    PageLayout,
  },
  data () {
    return {
      formState: {
        taxMonth: "", // 税款所属月
        keyword: '', // 姓名/身份证/手机号
        projectId: undefined, // 项目ID
        payEntity: undefined, // 缴纳实体
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      project: [],
      columns: datas.taxPayRecordColumns,
      dataSource: [{}, {}],
    };
  },
  methods: {
    moment,
    onSearch () {
      console.log(this.formState);
    },
    onChangeMonth (date, dateString) {
      this.formState.taxMonth = dateString;
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.formState.pageNum = page;
      this.formState.pageSize = pageSize;
    },
    onSizeChange (current, size) {
      this.formState.pageNum = 1;
      this.formState.pageSize = size;
    },
    /**
     * @description: 项目下拉列表
     * @param {*}
     * @return {*}
     */
    getProjectSelectList (params) {
      getProjectSelectList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.project = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    onSearchProject (value) {
      if (value.length >= 2) {
        this.getProjectSelectList({ projectName: value });
      }
    },
    onChangeProject (val) {
      this.formState.projectId = val;
    },
  },
  mounted () {
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-table td {
  white-space: nowrap;
}
</style>
